<template>
    <view class="wrap">
        <!-- 轮播图 -->
        <view class="swipeBox">
            <view class="uni-padding-wrap">
                <view class="page-section swiper">
                    <view class="page-section-spacing">
                        <swiper class="swiper" duration="300" :circular="circular" @change="onchange" @animationfinish="onAnimationfinish" :current="currentIndex">
                            <swiper-item v-for="(item, index) in imageList" :key="index">
                                <view class="swiper-item">
                                    <image :src="getImageSrc(item)" mode="aspectFit" class="oneswipeImg"></image>
                                    <view class="watermark" v-if="isShowWatermark"></view>
                                    <view class="unokImg" :class="[item.isSelected ? 'okImg' : '']"></view>
                                </view>
                            </swiper-item>
                        </swiper>
                    </view>
                </view>
            </view>
        </view>
        <!-- 滑动 -->
        <view class="slideBox">
            <scroll-view class="slideContent" scroll-x="true" :scroll-left="scrolLeft" scroll-with-animation="true">
                <block v-for="(item, index) in imageList" :key="index">
                    <view class="onebox " :class="[currentIndex == index ? 'currentBorder' : '']" @click="selectSlide(index)">
                        <image :src="item.imageInfo.image_url_t || item.image_url_t" lazy-load="true" mode="aspectFill" class="oneslideImg"></image>
                        <view class="watermark" v-if="isShowWatermark"></view>
                    </view>
                </block>
            </scroll-view>
        </view>
        <!-- 虚化背景 -->
        <view class="bigImg">
            <image :src="imageList[currentIndex].image_url_t" mode="" class="img" :style="{ width: bigImgWidth, height: bigImgHeigh }"></image>
            <view class="shadow"></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            contentWidth: 750,
            circular: true,
            currentIndex: -1,
            isWanna: false,
            bigImgWidth: '575px',
            bigImgHeigh: '100%',
            scrolLeft: 0,
            isSwiperIng: false,
            preLarge: require('@/pages/minePages/static/preview/preLarge.jpg')
        };
    },
    props: {
        preList: {
            type: Array,
            required: true
        },
        isShowWatermark: {
            type: Boolean,
            default: true
        },
        defaultIndex: {
            type: Number,
            default: 0
        }
    },
    computed: {
        imageList() {
            return this.preList;
        },
        imageLen() {
            return this.imageList.length;
        }
    },
    mounted() {
        this.contentWidth = this.preList.length * 230;
        this.resizeImg();
        this.preLoadImage(this.currentIndex);
        setTimeout(() => {
            this.resizeImg();
        }, 200);
    },
    methods: {
        getImageSrc(item) {
            if (item && item.load) {
                if (item.imageInfo) {
                    return item.imageInfo.image_url_c;
                } else {
                    return item.image_url_c;
                }
            } else {
                return this.preLarge;
            }
        },
        // 预加载图片
        preLoadImage(index) {
            let min = index - 1 < 0 ? 0 : index - 1;
            let max = index + 1 >= this.imageLen ? this.imageLen - 1 : index + 1;
            this.imageList.forEach((item, index2) => {
                if (index2 >= min && index2 <= max) {
                    item.load = true;
                }
            });
        },
        onchange(event) {
            if (this.isSwiperIng) {
                return;
            }
            this.isSwiperIng = true;
            this.currentIndex = event.detail.current;
        },
        // 滑动结束
        onAnimationfinish(event) {
            this.isSwiperIng = false;
            this.currentIndex = event.detail.current;
            this.$emit('slideChange', this.currentIndex);
        },
        selectSlide(index) {
            this.currentIndex = index;
            this.$emit('slideChange', this.currentIndex);
        },
        // 背景图片虚化及放大
        resizeImg() {
            const query = uni.createSelectorQuery().in(this);
            uni.getSystemInfo({
                success: res => {
                    query
                        .select('.oneswipeImg')
                        .boundingClientRect(data => {
                            if (data) {
                                let imgW = data.width;
                                let imgH = data.height;
                                this.getBigImgWidth(res.windowWidth, res.windowHeight, imgW, imgH);
                            }
                        })
                        .exec();
                }
            });
        },
        getBigImgWidth(sw, sh, imgW, imgH) {
            let scaleW = 0;
            let scaleH = 0;
            if (sw / sh > imgW / imgH) {
                scaleW = sw;
                scaleH = (scaleW * imgH) / imgW;
            } else {
                scaleH = sh;
                scaleW = (scaleH * imgW) / imgH;
            }
            this.bigImgWidth = scaleW + 'px';
            this.bigImgHeigh = scaleH + 'px';
        }
    },
    watch: {
        defaultIndex: {
            handler(newVal, oldVal) {
                this.currentIndex = newVal;
                if (newVal >= 0) {
                    this.preLoadImage(newVal);
                }
            },
            immediate: true
        },
        currentIndex: {
            handler(newVal, oldVal) {
                this.preLoadImage(newVal);
                let scrolLeft = 0;
                if (newVal < 2) {
                    this.scrolLeft = 0;
                } else {
                    scrolLeft = (newVal - 1) * 230;
                    setTimeout(() => {
                        this.scrolLeft = uni.upx2px(scrolLeft);
                    }, 300);
                }
            },
            immediate: true
        },
        preList: {
            handler(newVal, oldVal) {
                this.preLoadImage(this.currentIndex);
            },
            deep: true
        }
    }
};
</script>

<style lang="scss" scoped="scoped">
.wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // 轮播
    .swipeBox {
        width: 100%;
        height: 500rpx;
        margin: 180rpx 0 60rpx 0;
        position: relative;
        .swiper {
            height: 500rpx;
            .swiper-item {
                position: relative;
                width: 100%;
                height: 500rpx;
                background: #c3c3c3;
                .oneswipeImg {
                    width: 100%;
                    height: 500rpx;
                }
                .watermark {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: url(@/pages/minePages/static/preview/watermark.png) no-repeat center;
                    background-size: cover;
                }
            }
        }
    }
    .unokImg {
        width: 60rpx;
        height: 60rpx;
        background: rgb(0, 0, 0, 0);
    }
    .okImg {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        background: url(@/pages/minePages/static/preview/ok.png) no-repeat center;
        background-size: cover;
    }
    // 滑动
    .slideBox {
        width: 100%;
        height: 134rpx;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        font-size: 0;
        .slideContent {
            height: 100%;
            padding-left: 30rpx;
            white-space: nowrap;
            width: 720rpx;
            .onebox {
                position: relative;
                width: 200rpx;
                height: 100%;
                background: #c3c3c3;
                border-radius: 10rpx;
                margin-right: 30rpx;
                display: inline-block;
                .oneslideImg {
                    width: 100%;
                    height: 100%;
                    display: inline-block;
                    border-radius: 10rpx;
                    pointer-events: none;
                }
                .watermark {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: url(@/pages/minePages/static/preview/watermark.png) no-repeat center;
                    background-size: cover;
                }
            }
            .currentBorder {
                &::after {
                    position: absolute;
                    content: '';
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    height: 100%;
                    border: 5rpx solid #70c65d;
                    border-radius: 10rpx;
                    box-sizing: border-box;
                }
            }
        }
    }

    .bigImg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
        .img {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100%;
            transform: translate(-50%, -50%);
            -webkit-filter: blur(15px);
            filter: blur(6px);
        }
        .shadow {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
        }
    }
}
</style>
